AXForum  
Вернуться   AXForum > Microsoft Dynamics NAV > NAV: Blogs
All
Забыли пароль?
Зарегистрироваться Правила Справка Пользователи Сообщения за день Поиск Все разделы прочитаны

 
 
Опции темы Поиск в этой теме Опции просмотра
Старый 12.12.2018, 14:11   #1  
Blog bot is offline
Blog bot
Участник
 
22,659 / 777 (71) +++++++
Регистрация: 28.10.2006
Navigate Into Success: Extending the HTML trick: using actual images
Источник: http://vjeko.com/extending-the-html-...actual-images/
==============

Eric Sevareid famously said that the chief cause of problems is solutions. The same applies to the HTML trick I blogged about yesterday. As soon as you solve the problem of using HTML directly in your control add-ins, another problem arises: what do you do with actual images your control add-in includes?

This post explains how to solve that problem, and how to make it possible for your control add-in to both use HTML for defining UI and use relative control add-in paths to images.

Let’s dig in.



Imagine you had a control add-in with this script:



… that shows this:



Now, you fix this by applying the image trick, and refactor all this as HTML:



… and then load with this script:



… the results will be less than impressive:



Where is the problem? It’s simple: your image source URLs.

The image URLs you defined in HTML are relative, and this means they are relative to your entire URL. In my case, the URL is http://desktop-tfdoknj:8080/DynamicsNAV110/Webclient/ so the relative image URL is http://desktop-tfdoknj:8080/Dynamics...ges/accept.png (and reject.png), neither of which – guess what? – doesn’t exist at the path that this URL resolves to. If you read the yesterday’s post carefully, you know that all images are extracted to a “random” location (random only because you don’t know its exact absolute path in advance), and that’s the reason why you need the GetImageResource method in the first place: to resolve your relative control add-in path to the absolute server path of an image (or resource).

The solution

The solution is actually far simpler than it may seem at first. In theory, after you inject your HTML into the page, you need to locate all of the tags, read their src attributes, and replace them with URLs that you remap using the GetImageResource method.

In practice, it translates to:



I used jQuery for this only because I am already using jQuery, but if you want, you can simply do this with pure DOM:



That’s it. Simple, and easy.

As always, you can find the demo code on my github: https://github.com/vjekob/controladdin-html

It’s the same repository as from my HTML trick post, however there are four new branches:
  • Branch “images-1”: the demo without the HTML trick
  • Branch “images-2”: the demo with the HTML trick applied, but with image src problem
  • Branch “images-3”: fixes the image src problem
  • Branch “images-4”: uses DOM instead of jQuery to fix the src problem
Thanks for the attention, and stay tuned for more control add-in and JavaScript tips and tricks. There’s a lot more to come!

Read this post at its original location at http://vjeko.com/extending-the-html-...actual-images/, or visit the original blog at http://vjeko.com. 5e33c5f6cb90c441bd1f23d5b9eeca34The post Extending the HTML trick: using actual images appeared first on Vjeko.com.




Источник: http://vjeko.com/extending-the-html-...actual-images/
__________________
Расскажите о новых и интересных блогах по Microsoft Dynamics, напишите личное сообщение администратору.
 

Похожие темы
Тема Автор Раздел Ответов Посл. сообщение
Navigate Into Success: Abusing Images property to load HTML in control add-ins Blog bot NAV: Blogs 0 12.12.2018 00:17
Navigate Into Success: Trick: Instantiating any control in a Control Add-in Blog bot Dynamics CRM: Blogs 0 19.08.2014 23:31
Navigate Into Success: Trick: Subscribing to any Control Add-in event through pure C/AL Blog bot Dynamics CRM: Blogs 0 04.08.2014 11:00
Navigate Into Success: Tip: Interacting with the actual .NET Control Add-in controls Blog bot Dynamics CRM: Blogs 0 01.08.2014 12:17
Navigate Into Success: Extending NAV through .NET Interoperability Blog bot Dynamics CRM: Blogs 0 30.04.2011 03:36
Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Быстрый переход

Рейтинг@Mail.ru
Часовой пояс GMT +3, время: 18:56.
Powered by vBulletin® v3.8.5. Перевод: zCarot
Контактная информация, Реклама.