Thursday, December 31, 2015

Wishing you all a wonderful and Happy New Year

I wish you one and all a
Very Happy New Year


Hope I can do better in the coming years.

Adios,

Jay

Saturday, December 26, 2015

Develop a Side Menu App using Intel XDK - Part 4

In the Previous post (also read Note 2 at the bottom) we used the designer to link the items on the Side bar menu to display the linked pages on the display. We also noticed that after going to Favorites from Home, there was no way to return to Home.

In this post we will be adding a Back Button to the Favorites page so that when we click on it we return to the Home page. If this succeeds we do the same for Messages and Profile pages.

If you find only page#mainpage, add three more pages named, 'FAVORITES', 'MESSAGES' and 'PROFILE'.

Bring up the Favorites page by clicking on page#Favorites in the Pages menu as shown.


BackButton_01

We take off the text 'FAVORITES'. The page now appears as shown. It is empty now.


BackButton_02

Now we add a header to this page. Header is in the Layout group as shown.

BackButton_03

Click on Header in LAYOUT and drag it out to the page#Favorites as shown. You will see some color changes as shown.

BackButton_04

When you drop it on the page, it changes to this as shown.


BackButton_05
The HTML fragment is this:

BackButton_11

Double click the header (the blue rectangle) to reveal the properties as shown:


BackButtom_06

Make the following changes:
  • Place check mark for Title and Back Button.
  • For title write in 'FAVORITES'
Now the page appears as shown with the header modified as above.


BackButtom_07
The header's HTML fragment is now:

BackButton_10

Click EMULATE.
In emulation the FAVORITES page appears as shown.


BackButtom_08

Click on Back and the link for this button takes you to the following:


BackButtom_09

For the other pages do the same adding a 'header' and modifying the properties.

Now you have successfully modified the template to a working app.

Note 1: The page loading is quite times sluggish and make sure you have reloaded before you add a control of any kind.
Note 2: A new build was downloaded 2807 and this post is using the above build.

Part 5 here:
http://hodentekmobile.blogspot.com/2016/01/develop-side-menu-app-using-intel-xdk.html

This next part (Part 6) is all about placing images and text formatting:
http://hodentekmobile.blogspot.com/2016/02/develop-side-menu-app-using-intel-xdk.html

Thursday, December 24, 2015

New Stuff: Windows 10 November Build Update 10586

I had build 10240 which developed some problems after a regular Windows 10 Update (not the build update) following a Trojan attack.

This post is for a Toshiba Laptop running Windows 10 Pro. The changes that you see in a tablet or a Windows 10 Mobile( what I have is the Preview on Nokia Icon) will be quite different. Although Microsoft has Windows 10 on all device sizes, it is really not possible to have the same kind of settings, of course the core is the same, the bells and whistles are different.

Windows 10 Build 10568

I decided to get the latest update, the November Update 10568. This has a lot of new features  as described in one of the web sites mentioned towards the bottom of this post. I wanted to see if the changes are really there, and if they are, how effective they are. The following are some of the changes that I find mostly in Settings and Display.

Enable colored title bars



It does work as shown for Notepad.exe.
Off
On


Disable Backgroupd Image on Login Screen


Show more tiles on Start Menu


Did not make a difference on my laptop.

Off

On

Changes to Personalization riverted back



Lock screen background settings




There are three options to choose for the image but it is sluggish.

Windows Spotlight is now back. Browse should first pick up from a default folder and then a chosen folder. It is very sluggish and does not work well
Save Locations under System / Storage has new options



Multitasking SNAP options

When a you 'snap' by dragging a window by title bar to one of the sides and beyond you will see a trasient readjustment of borders and the snap action is finished.

Before snapped

After snapped


Environmental Windows Access
System Properties | Advanced and choose Environmental Variables. Not much of a change, but the window can now be resized.

New Look

In previous versions of Windows
I do remember that it could not be resized (don't quote me)


Things that are enhanced for the Microsoft Edge are here.

More here:
There are couple of more things that are in this new build.
More details here.


Wednesday, December 23, 2015

Windows 10 Mobile will not be in this year

Looks like it is pushed out to early 2016. Looks like Microsoft has lost steam. The problem is Microsoft has too many coals in the fire. This is what I found on ZD.net which I quote here:

"This November we introduced Windows 10 to phones including brand new features such as Continuum and Universal Windows Apps with the introduction of the Lumia 950 and 950 XL. The Windows 10 Mobile upgrade will begin rolling out early next year to select existing Windows 8 and 8.1 phones."

Anyway for my Nokia Icon I updated the Windows 10 Mobile preview build version to 10586.36 (aka November Update Build 10586).  This is supposed to bring in some new enhancements that you should be ssing in your Settings.

Even if Windows 10 Mobile is released there is no reason to entertain the idea that Verizon will update the version. Going my previous experience with Windows 8.1, it may just be possible sometime much later is 2016. I will not be interested as I will be getting out of the 'contract' with Verizon.

Tuesday, December 22, 2015

How do fix a broken Windows 10 Mail app?

Windows 10 Mail App stops responding and probably Calendar and People apps as well. When you click on the app nothing happens. You go to settings to see if you can uninstall. You will find there is no uninstall for this. It is part of the operating system and you cannot uninstall it.

This happened on my Windows 10 Pro on my Toshiba Satellite S70 series as well as Toshiba's Windows tablet running Windows 10.

What now?

You can run the following (System File Checker) on the command-line with elevated permissions. It will try to verify and fix problems with files (http://hodentekhelp.blogspot.com/2015/05/how-to-run-system-file-checkersfc.html).

However, this did not solve the problem on both the devices.

Next following this thread I launched Windows PowerShell with elevated permissions and ran the following statement (it appears the problem is due to some permissions with Windows Store) :

Get-appxprovisionedpackage –online | where-object {$_.packagename –like "*windowscommunicationsapps*"}
| remove-appxprovisionedpackage –online


Here is the screen shot of this run:

MailAppProblem

This fixed the problem on my laptop, but the Tablet is still having the same problem- non-responsive mail app.

Just before I ran the PowerShell application I had noticed that there was a new Windows Update and the Windows 10 build was 10586.

My tablet still had the build 10240 which I am upgrading to 10586. Let me see if this fixes the problem. Since these are Windows 10 programs, Microsoft should make sure they work all the time as most users may not even know what powershell is not to speak of elevated permissions, sfc etc.

Note: The build on the tablet now  is 10586  and is working.


Saturday, December 19, 2015

Develop a Side Menu App using Intel XDK - Part 3

In this post you will learn how to hook up the link controls to the pages to achieve Page Navigation.

This is part 3 of SideMenu Project. If you just landed here, please review Parts 1 and 2 at the following links:

Part 1:Creating a Intel XDK project using a template; SideMenu project UI, SideMenu on iPhone6 emulator
http://hodentekmobile.blogspot.com/2015/11/develop-side-menu-app-using-intel-xdk.html

Part 2: Review of Controls and Layout as well as working with Pages. Pages in a SideMenu
http://hodentekmobile.blogspot.com/2015/12/develop-side-menu-app-using-intel-xdk.html

If you want the next part, go here.

We have seen in earlier posts, the Side Menu list consisting of,

  • Home
  • Favorites
  • Messages
  • Profile
The last three list items have their own icons from the icon's list previously seen.

For example, the HTML code for the Favorites page (Click Favorites and review the HTML Preview) as shown is,

Nav_01.png

  • Favorites

  • The navigation scheme should bring in the page (one of the four) to the view window (phone's displayed area) when the related list item is clicked as shown here:

    Nav_02.png

    Set up to navigate to  Favorites page

    The next image shows the Side Menu with the properties for the list item with the label 'Favorites'. The link reference is page#Favorrites. The icon is also shown, if needed you can remove it.

    Nav_03.png

    The pane 'INTERACTIVITY' at the bottom has all the actions that you need to hook up. Right now, the Trigger [listitem Favorites] is showing the action [sidebar.uib_w_2] as shown here.

    Nav_04.png

    Click on sidebar.uib_w_2 and the following pop-up will be displayed.


    Nav_05.png
    From the pop-up menu choose the item page#Favorites (assuming you started setting up the navigation for Favorites) as shown in the previous image.

    After this choice your INTERCATIVITY pane should look like this:


    Nav_06.png

    Carry out the same for thee list items, Messages and Profile.

    The INTERACTIVITY pane should appear as shown (notice the difference between this image and the previous one) .


    Nav_07.png

    View the result of your work on emulator.

    Let us take short break and click on the EMULATE main menu to bring up the emulation of Apple iPhone6 as shown.

    Nav_08.png

    This is the start page of your app and it is the main page. Now click on the indicated icon to bring the Side Menu. This is what you should see:

    Nav_09.png

    Now if your interactivity set up has been correctly configured, then clicking each of the list item should bring up the corresponding page as shown for the Favorites list item.


    Nav_10.png

    Note: The template did not come up with a way to go back to the main page. We will see later how this can be done.

    For now, Click DEVELOP and click Reload as shown:


    Nav_11.png

    Run the emulator again and click the icon on the main page to bring up the Side Menu and verify that the pages (Messages and Profile) are properly linked.

    In the index.html page the corresponding HTML has changed as shown.


    Nav_12.png

    This completes this Part 3 of Side Menu Project

    Part 5 here:
    http://hodentekmobile.blogspot.com/2016/01/develop-side-menu-app-using-intel-xdk.html

    This next part (Part 6) is all about placing images and text formatting:
    http://hodentekmobile.blogspot.com/2016/02/develop-side-menu-app-using-intel-xdk.html

    Friday, December 18, 2015

    WebRTC and Microsoft Edge

     WebRTC makes web pages to see and hear through the camera, microphone, speaker etc available to the device displaying the web pages. With this two people can communicate with visual and audio support and even share data.

    WebRTC stands for Web-based Real-Time Communications. It is free and the WebRTC project provides mobile applications and browsers to have communication capabilities using simple Application Programming Interfaces (APIs).  Since voice and video are involved it is complicated because of various standards it has to contend with.

    WebRTC is supported on most browsers except Microsoft Edge. Microsoft Edge is the preferred browser for Windows 10 (all device types).


     Microsoft is not in the list having differences over some of the details such as Google's VP8 video codec to become the default.

    Microsoft has its own web based communication which is called CU-RTC-WEB. Microsoft acquired Skype which has browser-based version of voice and video calling application and it is in Microsoft's interest to stay with evolving WebRTC.

    Here is video of browser based communication between Mozilla and Chrome.



    Read more on how the technology is evolving;
    http://www.pcworld.com/article/2849392/does-skype-for-web-mean-webrtc-is-ready-for-prime-time.html

    Saturday, December 12, 2015

    Bestow native capability to Web Apps with Cardova

    Web apps are apps built using HTML5, CSS and JavaScript. This is no different than building a web site with HTML and JavaScript. Your web app is just the web view that will render the HTML/CSS/JavaScript files. Unfortunately this by itself is not enough except for some simple applications. However if you need access to native hardware like camera, accelerometer etc then Cardova plugins can provide access to those native capabilities.

    Cardova plugins consist of a JavaScript file and a code files for a given platform. Cardova maps the native code to JavaScript specific for the platform (iOS, Android, Windows) to care of implementing the native devices.

    Here is a list of many Cardova Plugins.

    Thursday, December 3, 2015

    Develop a Side Menu App using Intel XDK - Part 2

    In this post we take a look at the Layout and Controls as well as working with the pages. We will also learn how the SIDEMENU relates to the pages. I assume he have reviewed  Part 1.

    Let us take a look at the Controls that are available for the Side Menu App. Launch Intel XDK and open the project SideMenu from the previous post. The JavaScript code for this app  is from the appFramework.


    In the main MENU, DEVELOP click on the switch that toggles between CODE and DESIGN after you have clicked on index.html.

    The  app framework CONTROLS are as shown in this image.

    AFControls_01

    All nodes have been collapsed and you can expand them by clicking on the item, say LAYOUT.
    This expands to reveal the controls related to LAYOUT as shown. In addition to HEADERS and FOOTERS you can arrange the layout using, row, column and side-by-side. You could also use CARD style controls either the CARD, CARD COLUMNS or CARD GRID

    AFControls_02

    Collapse the LAYOUT and click on ORGANIZATION to display the following:
    For the framework chosen there appears to be items, LISTVIEW and LISTITEM

    AFControls_03

    Collapse ORGANIZATION and expand OVERLAY by clicking on it to display the following:
    The toggle overlay item SIDE MENU is the only one shown.


    AFControls_04

    In a similar manner you should review the rest of the controls.

    Now let us take a look at the DOM Tree View for this template. Click on DOM Tree View and display its contents as shown.

    AFControls_05

    It has a header, a page#mainpage;  a control left.uib_w_2 and a number of pages, #Home, #Favorites, #Message, #Profile which you do not see on the right shown here.

    AFControls_06

    The control left.uib_w_2 is clickable and it toggles between Mainpage with and without SIDE MENU as shown. After clicking the Side Menu it may take a while for the control to show up.

    AFControls_07
    [Note the designers could have used some kind of notification by color or message what the Side Menu is doing. However if you click once or twice you will notice the difference]

    This Control has a list of four items that can be linked to the 4 pages, #Home, #Favorites, #Messages and #Profile with their own icons. When you click on the > icon you should be able to bring up the page to view. Note that the interactivity does not appear to be present in the template right now.

    AFControls_08

    Also for each of the list items, the properties, styles and Interactivity is configurable as shown. For example you can change the icon from the default to any of the other from here.

    AFControls_09
    Also if you do not want to use an icon, you may even remove it from the app by taking out the check mark for icon. The src for this link is the href: Page#Home. The default style is used but can be changed using the two buttons.

    AFControls_10

    PAGES
    We take a look at the Main page and 4 other pages

    Click on Pages in App Framework to open the items as shown.


    AFControls_12

    Each of these pages have their own HTML code. This one for #HOME (Click on this and you should see the code in the bottom).

    AFControls_13

    As you can see the page is empty and you can write in something through the Edit HTML button at the bottom which should allow you to type-in. You can also use the designer tool to insert a Text control and configure it. We will take this route just to show the capability of this IDE.

    Click CONTROLS and in COMMON folder show drag and drop the Text from there to page#Home as shown. The text you type now in the PROPERTIES box will be transferred to the page#Home.

    AFControls_14

    After typing in your text in PROPERTIES the page appears as shown.



    AFControls_14B
    Accordingly the HTML for the page#Home changes to this:



    AFControls_15
    Once you get a hang for this you should go to index.html and make changes to the other pages as this will be very fast. Using the designer is also OK, but would take considerable time.
    Now for each of the pages #Favorites, #Messages, and #Profile insert appropriate text.

    In Part 3, We will configure the navigation of the pages, stay with me.
    http://hodentekmobile.blogspot.com/2015/12/develop-side-menu-app-using-intel-xdk_19.html

    Part 5 here:
    http://hodentekmobile.blogspot.com/2016/01/develop-side-menu-app-using-intel-xdk.html

    This next part (Part 6) is all about placing images and text formatting:
    http://hodentekmobile.blogspot.com/2016/02/develop-side-menu-app-using-intel-xdk.html