I am new to working with worklight enviroment and started working it on recently.
I am using dojo version 1.9 (the IBM supllied one) , worklight 6.1, OS windows 7, eclipse juno sr2 64bit, IE 10 (For RPE), Google chrome latest (As default browser).
I have tried many widgets in dojo mobile and all of them work fine, i have been through other questions too like "Worklight 6.1 Android Applicaiton renders all views with no widgets" and followed all steps given in the solution and successfully created and viewed the pages on both MBS and android emulator.
The only problem is when i am working with views. I add a tabBar from dojo and TabBarButtons for view transitions . Also add a few views in the pages and link them with the buttons. I also check and see that my main.js file is updated with all included elements.
Although the toolbar along with default view is visible it does not switch view when i click on other buttons in tabBar.
also onclicking the TabBarButtons an error popsup in chrome console -
Uncaught TypeError: undefined is not a function
This error pops up on each click .
here is the structure of my source code of in the body tag of index.html file :-
<body style="display: none;">
<div data-dojo-type="dojox.mobile.View" id="view2"
data-dojo-props="selected:true">
<div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:true" >
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Hello world'"></div>
<button data-dojo-type="dojox.mobile.Button">Hello</button>
<input data-dojo-type="dojox.mobile.TextBox"><input type="range"
data-dojo-type="dojox.mobile.Slider"
data-dojo-props="orientation:'H'">
</div>
<div data-dojo-type="dojox.mobile.View" id="view1"
data-dojo-props="selected:false">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'About',moveTo:'view0'">
</div>
<div data-dojo-type="dojox.mobile.RoundRect">
Hello, we are a leading company in innovations
</div>
</div>
<ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom" id="Tab1">
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:view0,transition:'slide'" id="tabB1">Home</li>
<li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="moveTo:view1,transition:'slide'" id="tabB2">About</li>
</ul>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
// Rest all is default code, no changes in jquery version or anything else
I have also tried the following things and none of them seem to work:-
-Copied and replaced files in www folder from dojoLib/dojo/dojo/nls/core-web-layer.js and mobile-web-layer.js files.
-Kept the Tabbar out of any view directly into body tag and linked views to it.
-Added id attribute to tabBar and tab button elements, and view elements.
-turned off provide missing library resources and included missing files (if any) ,rebuilt the project and ran again.
The main issue (causing the exception) is the missing quotes around the view ids of the moveto attributes. It should be:
data-dojo-props="moveTo:'view0',
Once fixed, your sample will work.
But there are another issue, this time a design one: the TabBar fixed property is only meaningful when used with a ScrollableView (this property ensures the tabbar is not scrolled and keeps its bottom position). So your outer view should be a ScrollableView instead.
Also, note that nesting views come with some limitations. In particular, using the 'moveto' attribute you cannot transition from a view to another view if the latter is contained in another parent.
Do not hesitate to look at the various tests in dojox/mobile/tests and to the documentation
Related
Having a trouble placing a background image in one of simple Vue.js project that I'm currently doing!
I've tried all the possible solutions that I could come up with. But no luck. That's why I'm here to have experts' help like you!
Having created the hero section, I tried to add a background image to that. Yes, the background image is imported to the right folder and the location of the folder is correctly written as well. However, once the compiler compiled the program, I get crickets! Nothing!
Here's the Sass code
.hero
background: url ('..../assets/clouds.jpg')
background-size: cover
background-color:#ffffff
And here's the HTML code for your reference
<div class = "home">
<section class="hero">
<div class="hero-body">
<div class=" container">
<h1 class="title"> {{heading}} </h1>
<div class="is-two-thids column is-paddingless">
<h2 class="subtitile is-4"> {{subheading}} </h2>
</div>
<a class="button is-large is-primary" id ="learn"> Learn More</a>
</div>
</div>
</section>
</div>
The funny thing is there's no error message shown. That's right, zero error messages.
This is the final product I received
For most of you out there, this should be a pretty simple fix. So, can you help this beginner out from this agony!
Thank you!
Edit: Got the following error message after adapting the change
background: url ('#/assets/clouds.jpg')
Edit 2: Sass file and its location.
It's location is src/router/mq.saas
Edit 3: Got the required one
Your issue is that ..../ is not a valid relative-path traversal symbol. Only ./ (current directory) or ../ (parent directory) are valid.
Assuming you've built the app with Vue CLI (v3), you should be able to use
background: url ('#/assets/clouds.jpg')
where # is configured as an alias for <projectRoot>/src.
See https://cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules
Alternately, construct a valid relative path from your Sass file / Vue component.
For example, say you're in src/mq.sass and want to reference src/assets/clouds.jpg, the relative path would be
background: url('./assets/clouds.jpg')
I am working on a legacy application that is being rewritten using Aurelia, the application has a bunch of static html in a tblHelp that needs to be displayed. I am using innerhtml.bind on a div in my view to databind the stored static HTML into the view. Each record is essentially a document complete with a full table of contents that links to other divs within the document (Bookmarks).
Something like:
<div id="toc">
<h1>Table of Contents</h1>
<ul>
<li>Section 1<li>
<li>Section 2<li>
</ul>
</div>
<div id="section1">
<h2>Section 1</h2>
<p>Paragraph Text...</p>
<p>Back to Table of Contents</p>
</div>
<div id="section2">
<h2>Section 2</h2>
<p>Paragraph Text...</p>
<p>Back to Table of Contents</p>
</div>
When I display the resulting page in my Aurelia view and click on the links, rather than moving to the proper Div on the current page, it seems to be attempting to route to an unknown route and ends up returning to the home page (that is my unknown route behavior). How do I make the Aurelia Router know that I am just moving around the same page and do not require it to route to another page?
I think you need to change your <div id= to <a id= which is the correct syntax for anchors. Hopefully Aurelia will recognize them as legitimate anchors when formatted correctly.
Also, since an anchor tag shouldn't wrap the whole content, you'll just open and close it at the top of the div. You can even leave the divs there but should not duplicate the id.
Update:
That being said, I created a GistRun that actually demonstrates that Aurelia should be able to handle the <div id= anchor targets. So, I'm not exactly sure why you're having problems.
Maybe this GistRun or the more standard <a id= approach will help you.
I have developed a Hybrid application for BB10 using IBM Worklight. I am using JQueryMobile. I have a page which has a footer containing links such as Home, About and Contact Us.
The issue is that, the links require multiple taps to hover. Sometimes, the links works in a single tap.
Sample Code
<div id="testFooter" data-position="fixed" data-tap-toggle="false">
<div class="ui-grid">
<a class="ui-block-a" href="#Home" style="padding:10px;display:block">Home</a>
<a class="ui-block-b" href="#About" style="padding:10px;display:block">About</a>
<a class="ui-block-c" href="#Contactus" style="padding:10px;display:block">Contact Us</a>
</div>
</div>
I have tried to increase the touch area for the anchor as follows. But, this does not solve the problem.
<a style="padding:10px;display:block">About</a>
Since the time I remember working on BlackBerry, there has always been this delay. Meaning, you must first 'touch' the screen, and only then further taps are recognized.
Here is a BB dev forum topic that talks about this as well: http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Webworks-App-doesn-t-respond-to-key-events-until-screen-touch/td-p/1714221
I think this is called Navigation Mode or something alike.
https://developer.blackberry.com/html5/search/?search=navigation+mode&searchaction=Search
Is there an easy durandal way to clear the view and put a loading or please wait... on the screen so the user gets some feedback to know that it is working until the ajax content loads?
Right now when I click on a something that navigates to a child route and that child route loads a module that has to do a lot of stuff in activate(), it does not switch the nav or clear the screen or give any feedback to the user that it is working and I see them clicking many times over and over and getting frustrated, then just about when they want to give up, the page loads in fine.
I would like to make this default functionality for my app and not have to do something special in every module or on every page, is that possible?
Thanks.
Have you tried to use router.isNavigating? Original Durandal template contains a spinner like this:
<div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
<i class="icon-spinner icon-2x icon-spin"></i>
</div>
A large percentage of the time, what you're looking for can be obtained very simply via:
<div data-bind="compose:ActiveVm">
<div class="text-center" style="margin : 75px">
<i class="fa fa-spinner fa-spin"></i>
</div>
</div>
The inner div can be any arbitrary markup which will display while the viewmodel is going through activation.
Note that this currently only displays the placeholder content the first time this dom section is composed. If you have a section of your application which is being updated via an observable viewmodel + compose approach, you could use the approach here:
Durandal: Showing a 'LOADING...' during composition
For anyone visiting from the future, this issue might be worth checking out in case native support for this is desired:
https://github.com/BlueSpire/Durandal/issues/414
I am working on a Worklight project, and I am trying to use custom listview. I use the Dojo toolkit to implement it, but it's not coming up to my expectations. Regarding design I am confuse. Here is my code:
<div id="bookmarks" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox/mobile/Heading">Some Heading</h1>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="label:'Item'"><button
data-dojo-type="dojox.mobile.ToggleButton">Label</button></li>
</ul>
</div>
I want this type of listView which include image tag, icon tag and a checkbox in each list item
Check out the Dojo documentation on ListItems for examples of adding built in options like icons.
dojotoolkit.org/reference-guide/1.8/dojox/mobile/ListItem.html#dojox-mobile-listitem
For more complex layout, such as the larger title, small sub-title, and timestamp, you can use span tags and css.