User Interface templates in Intel XDK

Using templates is the easiest to start off designing apps with Intel XDK. Intel XDK provides a number of layouts and templates for designing apps.


 Layout_UI.png

If you have been using apps you must have come across apps that use many of these types of apps. For example an earlier post here discusses the List View Template in detail and this link describes the Tab View in detail().

We will explore the other templates in future posts.  The Ionic Framework Starter template uses the Ionic Frame work and AngularJS and you can design apps for desktop, smartphones and tablets using Standard HTML5. Ionic Framework is supposed to provide native-app like feeling for UI and is based on HTML5 and essentially a front end beautifier. However Ionic requires AngularJS which is required for UI interaction; gestures; animations etc.

 ionicFramework.png
In a future post  we will describe creating an app with Ionic Framework.
Read more here for Ionic Framework:
ionicframework.com/docs/

AngularJS is HTML enhanced for Web Apps which you can download from Google site here (https://angularjs.org/).
You can target the build for Firefox if you so desire. Review here.




Comments

Post a Comment

Popular posts from this blog

Apps with Mobile Roadie, the one-stop platform

Image
MobileRoadie is the platform to build mobile apps with rich features. It is also one-stop, build, manage, design and engage. It supports all media, photos, video and audio. The text color in the picture may not show you the logo clearly! Here are features taken from Mobile Roadie site . Using Photos: Upload your photos manually, or automatically pull in your photos from an RSS feed, Flickr account, Instagram account or hashtag, Mobypicture, Picasa, Twitpic, or Facebook Fan Page profile photos. Users will see your photos in a grid layout of your choosing, and can even play a slideshow of your photos. Embed news: Add news posts manually, or import automatically via RSS feed, Twitter account, or Google News keywords.     Each item has artwork, title, date & time, and HTML story content. FAN Wall:     Import your past and upcoming events from Artistdata, Bandsintown, Songkick, Plancast, Ticketmob, SonicLiving, Eventbrite, or add them manually.     Your u
Read more

Towards cross-platform development..

There are lots and lots of Apps. In fact there are over a couple of million Apps including all of the major brands, Apple, Google, Blackberry, Microsoft with Apple at the top and Microsoft in the bottom. But this is a growing market. The variety is truly bewildering, different size devices; different operating systems(OS); different programming languages;  and different orientations. This post is not very recent but you can see how the various mobile operating systems compare: http://www.ibtimes.com/android-vs-ios-whats-most-popular-mobile-operating-system-your-country-1464892 The interactive image in the article really shows the popularity of a given OS/device among different geographical regions. Windows Phone Apps is for example based on Microsoft's Window 7, 8, 8.1 OSs using .NET. With Windows OS and Visual Studio one can build Apps for all of Microsoft devices covering Phone, Tablet and Desktop. However Microsoft Windows Apps sans Html5/CSS/Javascript is OS specific. E
Read more

Event Code: UI design with XAML in Visual Studio 2017 - 2

Image
I assume you have followed me with this post here: http://hodentekhelp.blogspot.com/2017/12/how-do-i-configure-button-in-xaml.html After reading the above you will see that you start with an empty project whose code is shown here: WinPhoneStep1 In the final step you will have achieved this: WinPhoneStep11 This project when deployed will just show a button as in the above and nothing more: WinPhoneStep13 Writing code for a click event of this button. Let us first give a name for this button, like ClickMe . When you highlight the button in the design by clicking it, the Property pane opens where you can write the name you want as shown. winPhoneStep20 In the XAML code the Button gets a qualifier x:Name="ClickMe" as shown here: Now enter the Click event to the code by just enter "cl" after a space as shown and the intellisense kicks-in showing your options as shown. winPhoneStep22.png You pi
Read more