ADVISOR DETAILS

RECENT BLOG POSTS

App Designer – Positioning

App Designer - Positioning 2 Columns

App Designer is drag-and drop tool for developing application user interfaces with rows and columns as the basic design structure. Various elements such as buttons, input fields, text areas, and more can be dragged into a column that sits in a row. The idea of positioning elements in your application is essential in designing user’s expereience with your application.

App Designer - Positioning Sidebar

Each elements has a set of properties that controls the layout styles of the item such as width and even the margins. These styling can also be associated with a media query.  “Row” elements has a “Space Between Columns” property that allows for increased spacing between various columns within that row. By default, “Column” elements have the “Layout” property set to vertical which causes the elements to stack vertically. The “wrapping” Layout property allows for elements in the columns to line up left and right of each other until the columns is too small of which they start to stack vertical. The last Layout property of columns is “center-h-v” which centers the elements directly in the middle of a column.  This property is very useful when there is only one element in the column. The “D-Margins” Active Style is a style that is shared amongst elements such as Input forms and buttons. Changes to a shared style affects all of the elements that are associated with that style. Sidebars are another element that also allow for various positioning options from the “Squeeze” Layout, “Initially Open”, or the “Swipeable” property.

App Designer - Positioning Footer

Unlike other elements, footers are fixed to the bottom of the page and used as containers for menus as seen of mobile devices

Read more >

App Designer – Images

AppDImages-Startes

App Designer is drag-and drop tool for developing application user interfaces with rows and columns as the basic design structure. Various elements such as buttons, input fields, text areas, and even images can be dragged into a column that sits in a row. Initially, images are required to be stored in your project’s directory before being in available for use in your application.

AppDimage-button

Adding an icon to a Button

  1. Drag the “Button” element under the “Form” section to the layout
  2. Check the “icon” checkbox to select an icon from the adjacent dropdown list
  3. Click on the “Icon Position” dropdown list to select the desired position for the icon

AppDimage-gbtn

Adding an image to a Graphic Button

  1. Drag the “Graphic Button” element under the “Form” section to the layout
  2. Check the “Image src” checkbox to access the available images in the adjacent dropdown list

Notes: Styles can also be created for the button for attributes such as Show-hide, Sizing, Default, Active, Hover, Text, and Margins.

AppDimage-sbtn

Adding images to a Sprite image

  1. Drag the “Sprite Button” element under the “Form” section to the layout
  2. Edit the available “Active Styles”
  1. “Default-Sprite-Button” contains a list of selectable images related to your project that can be viewed by default and position
  2. “Hover-Sprite-Button” contains a list of selectable images related to your project that can be viewed on mouse-hover and position
  3. “Sprite-Sizing” modifies the entire width and height of the button

Note: A Sprite Button can have two separate images or one image at different perspectives displayed by default and on hover.

AppDimage-dftimg

Adding an image to the application’s layout

  1. Drag the “IMG” element under the Media section to the Layout
  2. Select an image file in the “Src” dropdown list to be viewed
  3. Check the “Caption” checkbox to insert text adjacent to the image
  1. The “Caption Position” contains the location placement for the caption

For instance, if padding is needed for added space between the image and caption, a NEW “Padding” style can be added to the element.

AppDimage-bkimg

Adding an image as a background image

  1. Drag a Column” element under the Layout section to the design layout
  2. Click the “Background” style then New to create a new style
  3. Check the “Background image” checkbox to select an image from the list

Read more >

An HTML5 Project with Chromium Embedded Framework

As applications developed with HTML5 increases, developers tend to face the initial obstacle that their applications may be constrained by the browsers at which they are accessed through. The Chromium Embedded Framework (CEF) is an open source project that allows for a desktop application to support HTML5 features and plugins in web browser controls that are similarly supported by Google* Chrome. Chromium Embedded Framework is also available for use on Windows, Linux and Mac OS X systems. C/C++ is the programming languages that CEF is developed with via native libraries based on your platform of choice. There are two distinct versions of the framework that are currently maintained. CEF1 is a single process architecture implementation that provides reduced memory usage and supports the Webkit API as well as the Netscape Plugin Application Programming Interface (NPAPI) plugins. Reduced performance is apparent when running accelerated content as well as plugins such as Adobe* Flash while support for HTML5 audio & video is not present. CEF3 is a multi-process implementation that provides improved performance and a close relationship to Chrome due to their shared code as well as the Chromium Content API. CF3 also supports GPU acceleration, WebRTC, and more HTML5 features than CEF1.

Building a Windows application with HTML5 & Chromium Embedded Framework (CEF)
When it comes to building a Windows application to implement your HTML5 project outside of a standard browser, a few resources is needed.

1. Visual Studio 2005, 2008 or 2010
2. CEF binary files (https://code.google.com/p/chromiumembedded/downloads/list)

Visual Studio is used to navigate the solution’s file structure and edit the necessary .cpp files. In order to have the CEF client sample application load a HTML5 project (for example “html5app” folder in the “Release” directory),  changes should be made to the “client_hander.cpp” file under the “cefclient” folder.

//client_handler.cpp – line 32
m_StartupURL = "file:///<path_to_index_file>";
//m_StartupURL = "file:///html5app/index.html"

With this line change, execute a Rebuild of the solution to create a new “cefclient.exe” file which will be located under the Release folder.  Your HTML5 project should be viewable in the application’s window.

Here are a few references:

Read more >