×

Discussion Board

Results 1 to 4 of 4

Thread: MH5 ui.dialog

  1. #1
    Nokia Developer Expert
    Join Date
    Jun 2013
    Posts
    2

    MH5 ui.dialog

    Is this a ui.dialog box? How can i make a box like this? Can you post an fully working example code?



    Thanks

  2. #2
    Regular Contributor
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    289

    Re: MH5 ui.dialog

    Quote Originally Posted by bozcan View Post
    Is this a ui.dialog box?
    Yes I believe it is - if you open m.here.com in Google Chrome, and inspect the element behind the box you can see the following in the DOM:
    Code:
    <div class="mh5_Dialog mh5_RowLayout">
        <div class="mh5_ssoContainer mh5_ColumnLayout">
            <h1 class="mh5_title mh5_no_callout"><a href="http://here.com/news/" target="_blank" onclick="if(event._fake) {event.preventDefault();event.stopPropagation();}">Welcome to HERE</a></h1><div class="mh5_action mh5_SpringBoardSignIn mh5_baseColor">Sign in</div>
    .... etc
         </div>
    </div>
    The standard nokia.mh5.ui.Dialog is a <DIV> with a mh5_Dialog style class, so I suspect that this is one.

    Quote Originally Posted by bozcan View Post
    How can i make a box like this? Can you post an fully working example code?
    The dialog box works like an extra layout within a modal page, so to get one exactly like that you would need to steal the css and layout elements from m.here.com and add equivalent of the elements within your dialog box. It isn't a complete available component I'm afraid. The code for even the simplest dialog box is quite complex, here is a snippet to start:

    First create a simple embedded app (it is assumed your colors and mh5 stylesheets are in the correct location) - you'll need to substitute the app id and token of course:
    Code:
    <!doctype html>
    <html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=100">
        <!-- Definitions of mobile-friendly documents e.g. for BlackBerry: -->
        <meta name="HandheldFriendly" content="True">
        <!-- Definitions of mobile-friendly documents for Microsoft Browser: -->
        <meta name="MobileOptimized" content="width">
        <!-- iOS viewport definitions: -->
        <!--meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <!-- disable BlackBerry UI events -->
        <meta name="touch-event-mode" value="native">
        <meta name="cursor-event-mode" value="native">
        <!-- disables address sniffing -->
        <meta name="format-detection" content="telephone=no"/>
        <meta name="format-detection" content="address=no"/>
        <title>Dialog Example</title>
    
        <link rel="stylesheet" href="../../lib/mh5.css" type="text/css">
        <link rel="stylesheet" href="../../lib/colors.css" type="text/css">
        <style>
            html, body, #shapes {
                margin: 0;
                padding: 0;
                height: 80%;
            }
            
        header {
    	    overflow: hidden;
    	    position: relative;
    	    color: white;
    	    margin: 0;
    	    height: 5rem;
    	    background: url(img/logo.png) no-repeat 1.1rem 1.3rem;
    	    background-color: #B61F24;
    	    -webkit-box-sizing: border-box;
    	    box-sizing: border-box;
    	    font-weight: 100;
    	}
    	
    	dialog {
    		top: 4.8rem;
    	    right: 0.4rem;
    	    box-shadow: 0 0 1rem #666666;
    		background-color: white;
    		position: absolute;
    		top: 4.8rem;
    		min-width: 29.5rem;
    		max-width: 100%;
    		padding: 0;
    		border-color: #aaaaaa;
    		right: 0.4rem;
    		overflow: visible;
    	   	height: auto;
    	}
    	
    	map {
    		height: auto;
    	}
    	
    	
        </style>
    </head>
    <body class="mh5_hwacc_body">
    
        <script src="../../lib/mh5.js"></script>
         <script src="dialog.js"></script>
    
    
     
     
        <script type="text/javascript">
          
          
           nokia.mh5.assetsPath = "../../lib/";
    	 nokia.mh5.app.embed({
                appId: "YOUR APP ID GOES HERE",
                appCode: "YOUR APP CODE GOES HERE",
                hideAddressBar: true,
                
              layouts: ["myLayout"],
                
                myLayout	: {
                    controller: nokia.mh5.app.controller,
                    pages: ["layout"], 	
                    layout:  example.layout
                }
            });
    
        </script>
    
    </body>
    </html>
    Where the definition of the page is a separate file dialog.js as shown.
    Code:
    (function(global) {
        if (!global.example) {
            global.example = {};
        }
        if (global.example.layout) {
            return;
        } 
    
      global.example.layout = {
       	
       		cssClass:  "mh5_Page",
       		layout: {
    			type: nokia.mh5.ui.RowLayout
    		},
            children: ["button","dialog", "map"],
            button: {         
              	  control:  nokia.mh5.ui.Button,            
                  text: "Page1",
                   cssClass: "mh5_Button",
    			onClick: function () {				
    				  this.parent.dialog.visible = true;
    				   this.parent.dialog.label.visible = true;
    				    this.parent.dialog.childbutton.visible = true;
    				  this.parent.map.visible = false;
    			}
            },
            map:{
            	control: nokia.mh5.components.Map,
            	 cssClass: "mh5_Map",
            	 schema: "normal.day"
            },
            dialog:{
        		control: nokia.mh5.ui.Dialog,
        		visible: false,
    	          cssClass: "dialog mh5_Dialog",
    	          content:"HI THERE",
    	          children : ["label" ,"childbutton"],
    	          closeOnTap: false,
    	          label: {
    				control: nokia.mh5.ui.Control,
    				rootHtmlElementName: "label",
    				innerHTML: "This is a dialog box",
    				visible:false
    			},
    	          childbutton: {
    	          	  	control: nokia.mh5.ui.Button,
    					text: "Page1",
    					visible:false,
    					onClick: function () {				
    				  		this.parent.parent.dialog.visible = false;
    				  		this.parent.parent.map.visible = true;
    			
    					}
    	      		}
        	}
       	
    	};
    })(window);
    The trick is to style the CSS so that the dialog box appears on screen where you want it, which is difficult. Use the cssClass property on the map, dialog and button to add style classes to the DOM elements get them to appear where you want.
    Last edited by jasfox; 2013-06-27 at 15:20.

  3. #3
    Nokia Developer Expert
    Join Date
    Jun 2013
    Posts
    2

    Re: MH5 ui.dialog

    Thank you Jason. This helped much =)

  4. #4
    Registered User
    Join Date
    Aug 2012
    Posts
    12

    Re: MH5 ui.dialog

    Hi Jason and bozcan, one question though, tried listeners, infobubbles?
    I'm unsure if the infobubble listeners are supposed to be affected by the dialog in this code or the code I hacked together is bad, but when using custom listeners for infobubbles (might be with just regular vanilla infobubbles as well) with the code in the example their creation points get moved, that is, the places I click the map to show the infobubble and markers is almost a whole height of the map off up...
    So, I've changed the layout by putting the "dialog" in the array after the "map" and the "button" first and now the offset seems to be gone, but I'm still wondering how exactly all of this is working (I'm kinda new to using high-level embed code for the the mh5 map, as I've previously used the functional approach, but that way I couldn't figure out how to use the dialog, so I'm not complaining too much as this does seemingly work, it's just I'd like to know why its offset - my guess is some code in the mh5.js calculates the offsets for drawing infobubbles prior to the page being ready - and at the time that happens the offset is bigger due to the dialog still being shown and not yet hidden and displayed prior to the map)...

    Quote Originally Posted by bozcan View Post
    Thank you Jason. This helped much =)
    P.S.
    Two side questions:

    1. what's the best "non-dirty" way to access the map inside a listener handler function (when using it inside nokia.mh5.adapters.Route.fetch() in particular) because right now I'm using the nokia.mh5.app.controller.current.page.map object since this.parent isn't working for me inside of the anonymous function handling the success of the aforementioned Route.fetch() in a high-level embedded application code?

    2. what is the way to make the dialog innerHTML dynamic i.e. pass in a parameter or make it from some local variable values (setting it inside onClick of button fails for me and returns undefined)? Would you mind giving another or updating the existing example, please?
    Last edited by ntek; 2013-08-06 at 13:48.

Similar Threads

  1. Custom dialog- a dialog similar to a popup dialog
    By zhengyu97 in forum Symbian User Interface
    Replies: 1
    Last Post: 2010-11-24, 04:46
  2. Modal Dialog key events causing dialog to exit
    By roland.berry in forum Symbian
    Replies: 0
    Last Post: 2007-07-19, 10:29
  3. Confirmation Dialog and OK/Cancel dialog for 7650
    By edmundkkchan in forum Symbian User Interface
    Replies: 1
    Last Post: 2002-09-05, 14:47
  4. Confirmation Dialog and OK/Cancel dialog for 7650
    By edmundkkchan in forum Symbian
    Replies: 0
    Last Post: 2002-09-05, 02:59
  5. Replies: 1
    Last Post: 2002-05-08, 16:34

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×