Create amazing HTML5 and CSS based mobile apps fully visually in Dreamweaver with DMXzone Visual App Designer! Use the ready to go Mobile UI Components and manage the app logical structure in the dedicated floating panel. Build your app with context aware drag & drop and enter the components properties in the smart property inspector. Empower the great looking Framework7 mobile framework for awesome native looking designs.
Make dynamic apps together with the HTML5 Data Bindings and connect them to databases with the DMXzone Database Connector PHP/ASP and Updater PHP/ASP. When you are done with the app you can build, test and package it directly in DMXzone Cordova Builder for any platform.
Fully Visual App Design in Dreamweaver
- Get ready to design your apps fully visually in Dreamweaver with the
DMXzone Visual App Designer for Framework7. Now you can directly see
your logical app structure and its components in the dedicated floater
and just add desired components and assign actions!
Visual App Structure at your disposal
- Work with a high level view of your app where the whole picture is
clearly visible and you are not buried under nested structuring details.
Context sensitive components editing
- You don't need to learn any complex app structures! The Visual App
Designer does that for you – it will let you do add the UI components
that are only allowed in that context! So the right structure is always
guaranteed for you!
Visually reorder components with Drag & Drop
- So you want to change the order of your components and adjust the
layout? It is all done by simple drag & drop actions! Again you can
only drag components to places where they are allowed to be! The drag
status is clearly indicated with icons.
Multi pages fast responsive apps
- Organize your app in clear pages that can be either inline in one
page as a Single Page App and or be separated in child files that are
loaded dynamically through Ajax for the best performance. In any way,
the user will experience a fluid native app that does not have any
loading delays but is mighty fast!
Smart visual components with dynamic properties
- Every UI component comes with its own dynamic properties. You can
easily chance them in the dedicated property inspector. The property
inspector shows only the valid properties for the selected component in
the current context. So you will see only the properties you need.
Rich UI property inspectors
- The property inspectors offer amazing controls and allow you to enter
values as easy as possible, packing rich UI controls like amazing
color, theme and icon pickers.
Integrated inspectors for nested elements
- The dynamic property inspectors not only give you access to the base
properties, some of them even offer direct access to nested components
properties like icons and other media elements. So you have a great
overview of the current component and its children.
Visual action based programing design
- Every component has its own actions and those can be easily selected
from the property inspector. Wherever you want a navigation action, open
or close panels or popups it is all there a single click away – no
Behaviors integration for calling custom actions - If the built-in actions are not enough – you can just assign any behavior action to any of the components!
Integrated properties for HTML5 Data Bindings integration
- The UI components offer great integration with HTML5 Data Bindings –
you can bind dynamic data or make repeating regions and elements
directly from the dedicated property inspectors!
DMXzone Database Connector for dynamic data query and population
- Want to populate you app with data from your own remote database? It
is all possible with the DMXzone Database Connector. Just define a
remote connection to a dedicated data API site in Dreamweaver and you
are ready to go!
DMXzone Database Updater for performing actions as database updates
- If you want to perform any data manipulation on your remote database,
it is all possible with the DMXzone Database Updater – actions are
directly performed and triggered by the UI Components.
Great integration with DMXzone Cordova Builder-
Once you're ready with your app design in DMXzone Visual App Builder,
define, generate and build your mobile app with a few clicks in DMXzone
Cordova Builder for any popular platform.
Framework 7 Features
Ultra easy to use. Not harder than website
- To create apps using Framework7 is as easy as website creation.
Try to start and you will be surprised how easy it is.
Awesome UI components to choose from
- Framework7 comes with a bunch of ready to use UI elements
like buttons, popup, popover, list views, media lists, cards, preloader (activity indicator), form
Full support for swipe back
- One of Framework7' killing feature is supporting of iOS well known
swipe back gesture from left border of screen when you want to get to
the previous page. It simply works, and works perfectly as you expect it
to do. Just swipe from left (or drag with mouse) area of the page to
see smooth transition to the previous page. It is not just A-B
transition. It really follows your finger with parallax animation while
Native scrolling - It can sound even curious but one of the most important Framework7
feature is that it uses only native scrolling. Moreover - it multiplies
its advantages! So you can still have this awesome scrolling with
momentum and resistance bounce without any scrolling issues!
- It is all about performance and Framework7 uses only high performance
hardware accelerated css animations and transitions to achieve the best
Awesome pages animation
- One of the main target of Framework7 is to have native look and
feeling of iOS application. And Framework7 is the only framework that
solves it and offers 1:1 page animation with smooth parallax effect,
changing opacity and shadow when loading new page.
XHR + Caching + History + Preloading
- This is an unbeatable combination to make your app routing as perfect
as possible. Framework7 is ready to route your app pages using XHR
(optional) with its own internal methods and internal HTML configurable
caching that allow to load pages faster and save a lot of time and
traffic for your users! It loads page via Ajax only ones per specified
caching period (10 minutes by default), other times it just gets it from
memory. It allows to make further requests immediately!
10 stunning iOS color themes to style your apps
- The extension features 10 color themes to choose from for your apps.
The applied color theme affects the interactive elements such as links,
buttons, form elements, icons.
2 beautiful layout themes - There are two available layout themes to choose from - white and dark.
Design for iOS but also run on other platforms
- Although the Framework7 design is based on iOS you can build also
native apps for other platforms like Android, Blackberry and Windows
Phone! Your native app will just looks like an iOS app everywhere!
Components in Visual App Designer
- Add awesome navigation to your app. You can fix it on the top of the
screen with page title and additional navigation elements. It features 3
main parts: left (designed for "back link"), center (for page title)
and right (same as left).
- Add additional navbar for each page with different navbar elements
such as text and links. The layout remains the same as the navbar but
you can choose between fade or slide transition effects.
Sub navbar -
Sub Navbar is useful when you need to put any additional elements into
the navbar, like buttons. It also remains visible when navbar hidden.
Sub navbar supports sliding transitions when used with dynamic navbar.
- The toolbar is fixed area at the bottom of the screen, where you can
add navigation elements, icons, badges and more. All elements are
equally spaced along the toolbar with equal space between them.
Tab bar - Tab bar is a particular case of toolbar, but it contains icons or icons with labels, instead of plain links.
Side panels - You can choose between a right or left side panel for your app. Within the panel you can add any page component.
Content block - This is the place for your content, which can be text, images, buttons and links.
- The popup window pops up over the app's main content. You can use it
for example when a user is filling out a form and needs to confirm the
input info with a confirm button, text agreement and other.
Popover - Popover component is used to manage the presentation of content in a
popover. You can use popovers to present information temporarily in an awesome tooltip-like area. The
popover remains visible until the user taps outside of the popover
window or you explicitly dismiss it.
- List views are versatile and powerful user interface components
frequently found in iOS apps. A list view presents data in a scrollable
list of multiple rows that may be divided into sections/groups. You can
use list view to let your users navigate through hierarchically
structured data, present an indexed list of items, display detail
information and controls in visually distinct groupings or present a
selectable list of options.
Media list view
- Media list view is extended case of list view where you can add
additional elements such as images. It's useful for comment threads or
Cards - Cards, along with list view, is a one more great way to contain and organize your information. They are
typically an entry point to more complex and detailed information. Along with the inner area you can add header and footer.
Buttons - You can add normal or big buttons, active or whole buttons row. From
the properties you can choose to fill the button with color and the text color.
Forms - The included form elements allow you to create flexible and beautiful form layouts within your app.
Full support for Google Android Material Design! So you can make apps that look very fancy in the new Material Design!
can choose if you want to use iOS, Material or Hybrid design for your
app. When you choose Hybrid, then runtime the design will be determined
depending on your device, so if you are on the iPhone you will get iOS
design and if you are on Android you will get Material Design
Updated Kitchen Sink Templates for Cordova two be two separate for iOS and for Material
Many other improvements under the hood
Added support for Framework7 "fixed" and "static" layouts next to the default "through" layout
George Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. The most popular for its over high-quality Dreamweaver extensions and templates.
George is also the founder of Wappler.io - the most Advanced Web & App Builder